<template>
  <div class="ListRight" ref="listRight">
    <div class="content">
      <div class="itemRow" v-for="item in listArr" :key="item.id">
        <NewestItem :itemObj="item"/>
      </div>
       <!-- 上拉触底 -->
        <div class="more">
        <div v-show="isMore">正在加载中...</div>
        <div v-show="!isMore">没有更多数据了</div>
      </div>
    </div>
  </div>
</template>

<script>
// 第一步引入
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import NewestItem from '@/components/NewestItem'
import { ListMainFun } from '@/network/innerAxios'
BScroll.use(Pullup)
export default {
  components: {
    NewestItem
  },
  props: ['hhh'],
  data () {
    return {
      listArr: [],
      resData: [],
      isMore: false,
      // 属于第二部里面的
      bscroll: null,
      page: 1,
      cid: 47
    }
  },
  watch: {
    hhh (val) {
      this.cid = val
      this.page = 1
      this.listArr = []
      this.getListData()
    }
  },
  async mounted () {
    await this.getListData()
    this.initScroll()
  },
  methods: {
    // 第二部,初始化
    initScroll () {
      this.bscroll = new BScroll(this.$refs.listRight, {
        // 触底方法
        pullUpLoad: true,
        click: true
      })
      // 第三步添加事件
      this.bscroll.on('pullingUp', this.PullupFun)
    },
    // 第三部的触底的方法
    PullupFun () {
      this.isMore = true
      // 第五步,判断this.resData的长度(判断有没有更多数据)
      if (!this.resData.length) {
        this.isMore = false
        this.bscroll.finishPullUp()
        return
      }
      setTimeout(async () => {
        this.page++
        await this.getListData()
        // 完成触底动作后将页面从新渲染一次
        this.bscroll.finishPullUp()
        this.bscroll.refresh()
      }, 1500)
    },
    async getListData () {
      await ListMainFun(this.page, this.cid).then(res => {
        console.log(res.data)
        // 第四步对老数据和新数据进行拼接
        const oldList = this.listArr
        const nslist = oldList.concat(res.data)
        this.listArr = nslist
        this.resData = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ListRight{
  padding:0 0.1rem;
  height: 100%;
  overflow: hidden;
  .content{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .itemRow{
      padding-top: 0.1rem;
      width: 49%;
    }
      .more{
    font-size: 0.28rem;color:#888;
    text-align: center;
    line-height:1hrem;
    height: 1rem;
    width: 100%;
  }
  }
}
</style>
